<template>
  <div class="a-input-wrap">
    <a-input
      :class="{ customSuffix: customSuffix }"
      v-bind="instance"
      v-model="defaultValue"
      @input="updateVal($event.target.value)"
      @pressEnter="updateVal($event.target.value)"
      @keyup.enter="enterChange($event.target.value)"
    >
      <template v-for="sloteItem in sloteOptions">
        <a-icon
          v-if="sloteItem.type === 'icon'"
          :slot="sloteItem.position"
          :type="sloteItem.sloteType"
          :key="sloteItem.type"
        />
        <a-tooltip
          v-if="sloteItem.type === 'tooltip'"
          :slot="sloteItem.position"
          :title="sloteItem.title"
          :key="sloteItem.type"
        >
          <a-icon
            :type="sloteItem.childOptions.sloteType"
            :style="sloteItem.childOptions.style"
          />
        </a-tooltip>
        <a-button
          v-if="sloteItem.type === 'enterButton'"
          :slot="sloteItem.position"
          :key="sloteItem.key"
        >
          <span v-if="sloteItem.isSlote">
            <slot name="sloteButton"></slot>
          </span>
          <span v-else>{{ sloteItem.title }}</span>
        </a-button>
      </template>
    </a-input>
    <div class="input-tips-wrap" :style="instance.styleTips">
      {{ instance.tips }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    instance: Object // 配置
  },
  data() {
    return {
      defaultValue: '',
      sloteOptions: [], // 自定义配置的循环配置
      customSuffix: false // 是否使用自定义后缀的样式名
    }
  },
  watch: {
    instance: {
      handler(nVal) {
        Object.assign(this, { ...nVal }) // 把传入的参数，融合到this中
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    updateVal(value) {
      this.$emit('change', value)
    },
    // 回车事件
    enterChange(val) {
      this.$emit('enterChange', val)
    }
  }
}
</script>
